<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        html, body {
            margin: 0;
            height: 100%;
            overflow: auto;
            font-size: 14px;
        }

        /*.bg-info {
            background-color: #909399;
        }
        .item:nth-child(2n-1){
            background: #f6f8f8;
        }
        .item div[class^="el-col"]{
            padding: 0 10px;
        }*/
        .photo {
            width: 48px;
            height: 48px;
            /*margin-right: 18px;*/
            border-radius: 50%;
            float: left;
        }

        .el-dialog__header {
            background: #409EFF;
            padding-top: 10px;
        }

        .el-dialog__title {
            color: #FFF;
        }

        .el-dialog__headerbtn {
            top: 15px;
        }

        .el-dialog__headerbtn .el-dialog__close {
            color: #FFF;
        }

        .el-dialog__body {
            padding: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <p class="el-button--text"><span @click="backPrev" style="cursor: pointer;"><i class="el-icon-d-arrow-left"
                                                                                       style="font-size: 14px;"></i>返回上一页</span>
        </p>
        <hr style="border: 1px solid #ebeef5;"/>
        <el-row>
            <el-col :span="12" style="padding: 0 20px;">
                <el-row>
                    <div class="el-col-sm-18">给客户打电话</div>
                    <div class="el-col-sm-6" style="text-align: right;">
                        <el-button type="primary" size="mini" @click="editTask">编辑</el-button>
                        <el-button type="info" size="mini" @click="dialogVisible = true">删除</el-button>
                    </div>
                </el-row>
                <div>&nbsp;</div>
                <div class="el-alert el-alert--info">
                    开始时间&emsp;&emsp;<span>2017-10-10 10:28</span>
                </div>
                <div>&nbsp;</div>
                <div class="el-alert el-alert--info">
                    结束时间&emsp;&emsp;<span>2017-10-10 10:28</span>
                </div>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <el-slider v-model="schedule" id="taskProgress" @click="cc"></el-slider>
            </el-col>
            <el-col :span="12" style="padding:0 20px;border-left: 1px solid #e5e5e5;">
                <el-tabs v-model="currentTask">
                    <el-tab-pane label="用户管理" name="first"></el-tab-pane>
                </el-tabs>
                <div style="padding: 20px 20px 0 20px;">
                    <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="发布任务动态"
                            style="border-radius: 0;">
                    </el-input>
                    <div class="el-alert el-alert--info" style="border: 1px solid #dcdfe6;border-radius: 0;">
                        <button type="button" class="el-button el-button--success el-button--mini"
                                style="float: right;">发布
                        </button>
                    </div>
                    <div style="position: relative;padding: 20px 0;">
                        <img src="photo.png" class="photo"/>
                        <div class="" style="margin-left: 70px;">
                            <div style="margin-bottom: 10px;">liujie</div>
                            <span style="color: #909399;">2018-02-02 08:53:25</span>
                        </div>
                        <span style="color: #909399;position: absolute;right: 10px;top: 10px;">1楼</span>
                    </div>
                    <div>
                        <p>[liujie] 更新进度至：100%</p>
                        <p>[liujie] 更新进度至：80% <span style="margin-left: 50px;color: #909399">2018-02-01 17:50:27</span>
                        </p>
                        <p>[liujie] 更新进度至：50% <span style="margin-left: 50px;color: #909399">2018-02-01 17:50:27</span>
                        </p>
                    </div>
                </div>
                <hr style="border: 1px solid #ebeef5;"/>
                <div>
                    <div style="position: relative;padding: 20px;">
                        <img src="photo.png" class="photo"/>
                        <div class="" style="margin-left: 70px;">
                            <div style="margin-bottom: 10px;">liujie</div>
                            <span style="color: #909399;">2018-02-02 08:53:25</span>
                        </div>
                        <span style="color: #909399;position: absolute;right: 10px;top: 10px;">2楼</span>
                    </div>
                    <div style="padding: 0 20px;">
                        <p>已完成任务50%</p>
                    </div>
                    <div class="el-alert el-alert--info" style="border-radius: 0;">
                        <el-input placeholder="请输入评论" size="small">
                            <template slot="append">发布</template>
                        </el-input>
                    </div>
                </div>
                <div>
                    <div style="position: relative;padding: 20px;">
                        <img src="photo.png" class="photo"/>
                        <div class="" style="margin-left: 70px;">
                            <div style="margin-bottom: 10px;">liujie</div>
                            <span style="color: #909399;">2018-02-02 08:53:25</span>
                        </div>
                        <span style="color: #909399;position: absolute;right: 10px;top: 10px;">2楼</span>
                    </div>
                    <div style="padding: 0 20px;">
                        <p>已完成任务50%</p>
                    </div>
                    <div class="el-alert el-alert--info" style="border-radius: 0;">
                        <el-input placeholder="请输入评论" size="small">
                            <template slot="append">发布</template>
                        </el-input>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="25%">
        <span>删除后任务将无法恢复，确定要删除？</span>
        <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false" size="small">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
		  </span>
    </el-dialog>
</div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                currentTask: 'first',
                schedule: 50,
                dialogVisible: false,
            }
        },
        methods: {
            editTask: function () {
                window.parent.document.getElementById("mainframe").setAttribute('src', 'edit_task.html')
            },
            backPrev: function () {
                window.parent.document.getElementById("mainframe").setAttribute('src', 'detail.html')
            },
            formatter: function (row, column) {
                return row.address;
            },
            cc: function () {
                document.getElementById("taskProgress")
            }
        }
    })
</script>
</body>
</html>
